<template>
  <div>
    <el-form ref="registerForm"  :model="registerRuleForm" :rules="registerRules" label-width="0px" class="register-Form">
      <el-form-item  prop="email">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input
              placeholder="邮箱"
              prefix-icon="icon iconfont iconemail"
              v-model="registerRuleForm.email"
            >
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-select v-model="registerRuleForm.emailSuffix" placeholder="请选择" >
            <el-option
              v-for="item in emailSuffixs"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item  prop="emailCode">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-input
              placeholder="邮箱验证码"
              prefix-icon="icon iconfont iconyanzhengma"
              v-model="registerRuleForm.emailCode"
            >
            </el-input>
          </el-col>
          <el-col :span="6" class="code-send">
            <el-button type="primary" @click="sendCode('registerForm')">发送</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item class="register-form-item" prop="username">
        <el-input
          placeholder="用户名"
          prefix-icon="icon iconfont iconuser_name"
          v-model="registerRuleForm.username"
        >
        </el-input>
      </el-form-item>
      <el-form-item class="register-form-item" prop="password">
        <el-input
          placeholder="密码"
          show-password
          prefix-icon="icon iconfont iconpassword"
          v-model="registerRuleForm.password"
        >
        </el-input>
      </el-form-item>
      <el-form-item class="register-form-item" prop="surePassword">
        <el-input
          placeholder="确认密码"
          show-password
          prefix-icon="icon iconfont iconquerenmima"
          v-model="registerRuleForm.surePassword"
        >
        </el-input>
      </el-form-item>
      <el-form-item >
        <el-row>
          <el-col :span="24" class="register-btn">
            <el-button type="primary" @click="registerClick('registerForm')">注册</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="bottom-container">
        <el-link type="primary" @click="toLogin">返回登录</el-link>
      </div>
    </el-form>
  </div>
</template>

<script>

  import {sendCode,register} from "network/loginRegister/LoginRequest";
  import * as methods from 'store/methods.const';

  import {checkEmail} from "common/utils";

  export default {
    components: {},
    data() {

      var validateEmail = (rule, value, callback) => {

        if (!checkEmail(value + this.registerRuleForm.emailSuffix)) {

          return callback(new Error('邮箱格式错误'));
        }

        callback();
      };

      return {

        registerRuleForm: {
          username: '',
          password: '',
          surePassword:'',
          email:'',
          emailSuffix:'@qq.com',
          emailCode:''
        },
        registerRules:{
          email:[
            {required:true, message:'请输入邮箱', trigger:'blur'},
            { validator: validateEmail, trigger: 'blur' }
          ],
          emailCode:[
             {
               validator:(rule, value, callback)=>{

               if (value === ''){
                 return callback(new Error('请输入验证码'))
               }
               if (value.length != 6){
                 return  callback(new Error('验证码格式错误'))
               }
                 callback();
               }, trigger:'blur'}
          ],
          username:[
            {required:true, message:'请输入用户名', trigger:'blur'},
            {min:3, max:10, message:'用户名长度3到10个字符', trigger:'blur'}
          ],
          password:[
            {required:true, message:'请输入密码', trigger:'blur'},
            {min:6, message:'密码最少6位', trigger:'blur'}
          ],
          surePassword:[
            {required:true, message:'请再输入一次密码', trigger:'blur'},
            {
              validator:(rule, value, callback)=>{
                if (this.registerRuleForm.password !== value){

                  return callback(new Error('确认密码与密码不一致'))
                }
                //验证callback()要执行
                callback();
              },trigger: 'blur'}
          ]
        },
        emailSuffixs:[
            '@qq.com',
            '@163.com',
            '@gmail.com',
            '@yahoo.com',
            '@sina.com',
            '@126.com',
            '@outlook.com',
            '@yeah.net',
            '@foxmail.com',
            '@protonmail.com',
            '@dabbl.de',
            '@hotmail.com'
        ]
      };
    },
    computed: {

        email(){

            return this.registerRuleForm.email + this.registerRuleForm.emailSuffix;
        }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

      registerClick(formRefName){

        this.$refs[formRefName].validate((data)=>{

          if (data !== true){
            return;
          }
          let params = {
            username:this.registerRuleForm.username,
            password:this.registerRuleForm.password,
            email:this.email,
            code:this.registerRuleForm.emailCode
          }
          register(params).then(data=>{

            this.registerSuccess(data);
          });
        });
      },
      sendCode(formRefName){


        this.$refs[formRefName].validateField('email',(data)=>{

          if (data !== ''){

            return;
          }
          sendCode({'email':this.email,'type':1}).then(data=>{
            this.$message({
              showClose:true,
              message: '验证码发送成功',
              type:'success'
            });
          });
        });

      },
      registerSuccess(data){

        this.$message.success('注册成功');
        setTimeout(()=>{
            // 跳转到首页
            this.$router.replace('/login');
        },1000);
      },
      resetClick(formRefName){

        this.$refs[formRefName].resetFields();
      },
      toLogin(){

        this.$router.replace('/login')
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='less' scoped>

  .register-Form{
    position: absolute;
    top:100px;
    width: 100%;
    padding: 0px 40px;
    box-sizing: border-box;
    .register-bottom-btns{

      display: flex;
      justify-content: center;
      .register-btn-reset{

        margin-left: 50px;
      }
    }
  }

  .code-send{
    .el-button{
      width: 100%;
    }
  }

  .register-btn{
    .el-button{
      width: 100%;
    }
  }


  .bottom-container{
    height: 35px;
    line-height: 35px;
    margin-top: -15px;
    font-size: 14px !important;
    display: flex;
    justify-content: center;
  }
</style>
